<template>
	<view class="content">
		<view style="height: 3vh;"></view>
		<view class="my-top">
			<view class="top-left">
				<image @click="goEdit" class="head" :src="info.u_img || '/static/my/my_head.png'" mode=""></image>
				<view class="top-tell">
					<view class="tell-box">
						<view>
							{{info.username || '用户名'}}
						</view>
						<view class="vip" v-if="info.team_level > 0">
							<image :src="info.team_levels" mode="heightFix"></image>
						</view>
					</view>
					<view class="tell">
						{{info.mobile || '188****888'}}
					</view>
				</view>
			</view>
			<!-- <view class="sign">
				<image src="/static/my/sign.png" mode=""></image>
				<text>签到</text>
			</view> -->
		</view>
		<view class="income">
			<view class="income-item">
				<view class="income-text">
					昨日收益
				</view>
				<view class="income-num">
					{{assets.yesterdayReward || 0}}
				</view>
			</view>
			<view class="income-item" @click="goincome">
				<view class="income-text">
					累计收益
				</view>
				<view class="income-num">
					{{assets.allReward || 0}}
				</view>
			</view>
			<view class="income-item" @click="goMarket">
				<view class="income-text">
					市场收益
				</view>
				<view class="income-num">
					{{assets.sc_Reward || 0}}
				</view>
			</view>
			<view class="income-item" @click="gohburl">
				<view class="income-text">
					红包收益
				</view>
				<view class="income-num">
					{{info.red || 0}}
				</view>
			</view>
		</view>
		<view class="my-content">
			<!-- <view class="member">
				<view class="member-left">
					<image src="/static/my/member.png" mode=""></image>
					<view class="member-text">
						会员中心
					</view>
				</view>
				<view class="member-btn">
					立即查看
				</view>
			</view> -->
			<view class="asset">
				<view class="asset-item bg5" @click="gopintuan">
					<view class="asset-title">
						云币大搏杀
					</view>
					<view class="asset-mintitle">
						立即进入
					</view>
				</view>
				<view class="asset-item bg6" @click="gokaquan">
					<view class="asset-title">
						卡券
					</view>
					<view class="asset-mintitle">
						立即进入
					</view>
				</view>
			</view>
			<view class="title">
				<view>
					我的资产
				</view>
				<view class="wallet" @click="goWallet">
					<view> 
						进入我的钱包
					</view>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="asset">
				<view class="asset-item bg3" @click="goWallet">
					<view class="asset-title">
						云矿石
					</view>
					<view class="asset-num">
						{{info.balance || 0}}
					</view>
				</view>
				<view class="asset-item bg4" @click="gormance">
					<view class="asset-title">
						矿机资产
					</view>
					<view class="asset-num">
						{{info.user_performance || 0}}
					</view>
				</view>
			</view>
			<view class="title">
				常用功能
			</view>
			<view class="ability">
				<view class="ability-item" v-for="(item,index) in abilityList" :key="index" @click="gonavto(item.url)">
					<view class="ability-left">
						<image :src="item.img" mode=""></image>
						<view class="ability-text">{{item.text}}</view>
					</view>
					<u-icon name="arrow-right" color="#ffffff" size="18"></u-icon>
				</view>
			</view>
			<view style="height: 10vh;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				abilityList: [
					// {
					// 	text: '转换',
					// 	img: '/static/my/ability1.png',
					// 	url: '/pages/my/balance/index'
					// },
					{
						text: '站内互转',
						img: '/static/my/ability2.png',
						url: '/pages/my/transfer/index'
					},
					{
						text: '实名认证',
						img: '/static/my/ability3.png',
						url: '/pages/my/reanme/index'
					},
					{
						text: '支付绑定',
						img: '/static/my/ability4.png',
						url: '/pages/my/pay_binding/index'
					},
					{
						text: '邀请好友',
						img: '/static/my/ability5.png',
						url: '/pages/home/invite/index'
					},
					{
						text: '我的团队',
						img: '/static/my/ability6.png',
						url: '/pages/my/team/index'
					},
					{
						text: '在线客服',
						img: '/static/my/ability7.png',
						url: 'kefu'
					},
					{
						text: '账户设置',
						img: '/static/my/ability8.png',
						url: '/pages/my/set/index'
					},
				],
				info: {},
				assets: {},
				isAppleBrowser: false
			}
		},
		onShow() {
			this.getUser()
			this.islogin()
			this.detectBrowser();
		},
		methods: {
			gohburl(){
				uni.navigateTo({
					url:'/pages/my/hbtext/index'
				})
			},
			gopintuan() {
				uni.navigateTo({
					url: '/pages/home/team_work/index'
				})
			},
			gokaquan() {
				uni.navigateTo({
					url: '/pages/my/certificate/index'
				})
			},
			detectBrowser() {
				const userAgent = navigator.userAgent;
				// 检测是否是苹果设备（iPhone、iPad、iPod）
				const isAppleDevice = /iPhone|iPad|iPod/i.test(userAgent);
				const isSafari = /Safari/i.test(userAgent) && !/Chrome/i.test(userAgent);
				this.isAppleBrowser = isAppleDevice && isSafari;
				console.log('isAppleBrowser:', this.isAppleBrowser);
			},
			gormance() {
				uni.navigateTo({
					url: '/pages/my/my_wallet/index?type=' + 1
				})
			},
			islogin() {
				let token = uni.getStorageSync('token')
				if (token == '' || token == undefined) {
					uni.showToast({
						title: '请先登录！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/index'
						})
					}, 1000)
					return
				}
			},
			gonavto(url) {
				if (url == '') {
					uni.showToast({
						title: '开发中0.0',
						icon: 'none'
					})
				} else if (url == 'kefu') {
					uni.navigateTo({
						url: '/pages/my/kefu/index'
					})

				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			goincome() {
				uni.navigateTo({
					url: '/pages/my/income/index'
				})
			},
			goWallet() {
				uni.navigateTo({
					url: '/pages/my/my_wallet/index'
				})
			},
			goMarket() {
				uni.navigateTo({
					url: '/pages/my/market/index'
				})
			},
			getUser() {
				let params = {

				}
				this.$Request({
					method: 'POST',
					url: '/api/Personal/myIndex',
					data: params
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data.user
						this.assets = res.data.assets
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			goEdit() {
				uni.navigateTo({
					url: '/pages/my/edit/index'
				})
			}
			// 判断是否签到
			// getInfo() {
			// 	this.$Request({
			// 		method: 'POST',
			// 		url: '/api/personal/getSignIn',
			// 		data: params
			// 	}).then(res => {
			// 		if (res.code == 1) {
			// 			console.log(res)
			// 		} else {
			// 			uni.showToast({
			// 				title: res.msg,
			// 				icon: 'none'
			// 			})
			// 		}
			// 	})
			// }
		}
	}
</script>

<style>
	page {
		background-color: #17191A;
	}
</style>
<style lang="scss" scoped>
	.content {
		width: 100%;
		background-image: url('../../static/my/my-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 568rpx;

		.my-top {
			padding: 30rpx;
			color: #fff;
			text-align: center;

			.top-left {
				width: 100%;
				text-align: center;

				.head {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.top-tell {
					color: #fff;
					font-size: 32rpx;
					font-weight: 600;
					margin-top: 24px;

					.tell-box {

						.vip {
							margin-left: 15rpx;
							padding-top: 10rpx;

							image {
								width: 100rpx;
								height: 50rpx;
							}
						}
					}

					.tell {
						font-size: 24rpx;
						color: #eee;
						margin-top: 10rpx;
						font-weight: 400;
					}
				}

			}

			.sign {
				display: flex;
				align-items: center;

				image {
					width: 44rpx;
					height: 50rpx;
					margin-right: 5rpx;
				}
			}
		}

		.income {
			background-color: rgba(255, 255, 255, .24);
			padding: 30rpx;
			border-radius: 30rpx;
			margin: 30rpx;
			display: flex;
			justify-content: space-around;
			text-align: center;

			.income-item {
				color: #fff;

				.income-text {
					font-size: 24rpx;
				}

				.income-num {
					margin-top: 10rpx;
					font-weight: 600;
				}
			}
		}

		.my-content {
			height: 60vh;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			padding: 30rpx;
			color: #fff;

			.member {
				padding: 20rpx 30rpx;
				background-image: url('../../static/my/member-bg.png');
				background-repeat: no-repeat;
				background-size: 100% 96rpx;
				border-radius: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 39rpx;
					height: 38rpx;
				}

				.member-left {
					display: flex;
					align-items: center;

					.member-text {
						margin-left: 20rpx;
						color: #fff;
						font-size: 32rpx;
						font-weight: 600;
					}
				}

				.member-btn {
					padding: 10rpx 30rpx;
					border-radius: 30rpx;
					background: linear-gradient(90deg, #F9DFB6 0%, #E0B470 100%);
					color: #63350C;
					font-size: 24rpx;
				}
			}

			.title {
				padding: 30rpx 0;
				color: #fff;
				font-weight: 600;
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.wallet {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
				}
			}

			// .asset {
			// 	height: 286rpx;
			// 	background-image: url('../../static/my/asset.png');
			// 	background-repeat: no-repeat;
			// 	background-size: 100% 286rpx;
			// 	color: #fff;

			// 	.asset-top {
			// 		padding: 30rpx;

			// 		.asset-text {
			// 			font-size: 24rpx;
			// 		}

			// 		.asset-num {
			// 			font-size: 40rpx;
			// 			font-weight: 600;
			// 			margin-top: 10rpx;
			// 		}
			// 	}

			// 	.asset-cont {
			// 		display: flex;
			// 		justify-content: space-around;
			// 		padding: 30rpx;
			// 		text-align: center;

			// 		.asset-item {
			// 			.cont-num {
			// 				font-size: 36rpx;
			// 				font-weight: 600;
			// 			}

			// 			.cont-text {
			// 				font-size: 26rpx;
			// 				margin-top: 10rpx;
			// 			}
			// 		}
			// 	}
			// }
			.asset {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.asset-item {
					width: 48%;
					padding: 30rpx;
					font-weight: bold;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					margin-top: 24rpx;
					border-radius: 30rpx;
					border: 4rpx solid rgba(108, 233, 137, 0.12);

					.asset-title {
						font-size: 28rpx;
					}

					.asset-mintitle {
						font-size: 24rpx;
						margin-top: 10rpx;
						color: #bebebe;
					}

					.asset-num {
						font-size: 40rpx;
						margin-top: 10rpx;
					}
				}

				.bg1 {
					background-image: url('../../static/my/assets1.png');
				}

				.bg2 {
					background-image: url('../../static/my/assets2.png');
				}

				.bg3 {
					background-image: url('../../static/my/assets3.png');
				}

				.bg4 {
					background-image: url('../../static/my/assets4.png');
				}

				.bg5 {
					background-image: url('../../static/my/assets5.png');
				}

				.bg6 {
					background-image: url('../../static/my/assets6.png');
				}

				.single {
					background-image: url('../../static/my/assets4.png');
				}

				.other-item {
					background-image: url('../../static/my/assets2.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					border: 4rpx solid rgba(233, 179, 108, 0.12);
				}

				.other-single {
					background-image: url('../../static/my/assets3.png');
				}
			}

			.ability {
				background: linear-gradient(134deg, rgba(255, 227, 211, 0.06) 0%, rgba(67, 130, 84, 0.26) 100%);
				border: 4rpx solid rgba(108, 233, 137, 0.12);
				text-align: center;
				border-radius: 30rpx;
				padding: 0 30rpx 30rpx 30rpx;

				.ability-item {
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid rgba(255, 255, 255, .16);

					.ability-left {
						display: flex;
						align-items: center;

						image {
							width: 40rpx;
							height: 40rpx;
						}

						.ability-text {
							font-size: 28rpx;
							margin-left: 15rpx;
						}
					}

				}
			}
		}
	}
</style>